<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>示例</title>
</head>
<body>

    <div id="app">

        <input type="text" v-model="name" placeholder="你的名字" />
        <h1>你好, {{ name }}</h1>

    </div>

    <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
    <script>

        var app = new Vue({
            el: "#app",
            data: {
                name: ''
            },

            // 实例创建完成后调用,此阶段完成了数据的观测等,但尚未挂载, $el 还不可用。需要初始化处理一些数据时会比较有用
            created: function () {
                console.log("实例创建完成后调用")
            },

            // el 挂载到实例上后调用,一般我们的第一个业务逻辑会在这里开始
            mounted: function () {
                console.log(this.$el);   // 输出 <div id="app"><input type="text" placeholder="你的名字"> <h1>你好, </h1></div>
            },

            // 实例销毁之前调用。主要解绑一些使用 addEventList 监听的事件等
            beforeDestroy: function () {
                console.log("实例销毁之前调用")
            }
        });

        console.log(name);
    </script>

</body>
</html>